<script setup>

const client = useSupabaseClient()
const user = useSupabaseUser()

watchEffect(() => {
    if (user.value) {
        return navigateTo('/')
    }
})

const login = async (provider) => {
    const {data, error} = await client.auth.signInWithOAuth({
        provider,
        redirectTo: window.location.origin
    })
    if (error) console.log(error)
}
</script>

<template>
    <div id="authPage" class="w-full h-screen pt-32">
        <div class="w-full">
            <div class="w-full flex justify-center items-center gap-2.5 p-2">
                <img src="~/public/threads-logo.png" alt="logo" class="w-[35px]">
                <span class="font-bold text-2xl text-white">Threads</span>
            </div>

            <div class="max-w-[350px] mx-auto px-2 text-white">
                <div class="text-center mb-6 mt-4">Login / Register</div>
                <button @click="login('github')"
                        class="flex justify-center items-center gap-3 p-1.5 w-full border rounded-full text-lg font-semibold">
                    <div class="flex justify-center items-center gap-2">
                        <img src="~/public/github-logo.png" alt="github-logo" class="w-full max-w-[30px] rounded-full">
                        <span>Github</span>
                    </div>
                </button>
            </div>
        </div>
    </div>
</template>

<style scoped>

</style>